<template>
  <div
    ref="tool"
    class="box-card"
    @mousedown="handleMouseDown"
  >
  <li ref="line" style="width:3px;height:100px;background-color:rgba(0,0,0,0.5);color:transparent;position:absolute;margin-left:75px;top:-103px;"></li>
    <el-row :gutter="10">
      <el-switch
      v-model="isFixed"
      active-color="#ff4949"
      inactive-color="#13ce66"
      active-text="固定"
      inactive-text="移动"
    >
    </el-switch>
    <!-- {{ title }} -->
    </el-row>
    <el-row :gutter="10">
      <el-col :offset="5" :span="5"><el-button circle type="primary" icon="el-icon-edit" size="mini"></el-button></el-col>
      <el-col :offset="5" :span="5"><el-button circle type="primary" icon="el-icon-delete" size="mini"></el-button></el-col>
    </el-row>

  </div>
</template>
<style lang="less" scoped>
.el-row {
  margin-bottom: 10px;
}
.box-card {
  z-index: 2048;
  position: absolute;
  width: 150px;
  height: 80px;
  top: 5%;
  right: 5%;
  background-color: white;
  opacity: 0.95;
  padding: 5px;
  border: 3px solid rgba(0,0,0,0.5);
  -webkit-box-shadow: #c7c7c7 0px 0px 18px;
  -moz-box-shadow: #c7c7c7 0px 0px 18px;
  box-shadow: #c7c7c7 0px 0px 18px;
  border-radius: 10px;
}
</style>
<script>
export default {
  data () {
    return {
      title: '',
      isFixed: true
    }
  },
  mounted () {
    // window.onresize = this.handleResize
  },
  methods: {
    handleMouseDown (event) {
      event.preventDefault()
      if (!this.isFixed) {
        // this.title = event
        //获取目标元素
        // let currentTarget = event.target
        let currentTarget = this.$refs.tool

        //鼠标相对元素位置
        let disX = event.clientX - currentTarget.offsetLeft;
        let disY = event.clientY - currentTarget.offsetTop;
        document.onmousemove = (e) => {
          e.preventDefault()
          let left = e.clientX - disX;
          let top = e.clientY - disY;

          // this.postionX = left;
          // this.postionY = top;

          currentTarget.style.left = (left >= 0 ? left : 0)  + 'px';
          currentTarget.style.top = (top >= 0 ? top : 0) + 'px';

          // this.title = left + ':' + top

          this.$refs.line.style.height = top + 'px'
          this.$refs.line.style.top = -top - 3 + 'px'
        }

        document.onmouseup = (e) => {
          e.preventDefault()
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    },
    handleResize (e) {
      // this.$refs.tool.style.right = '5%'
      // this.$refs.tool.style.top = '5%'
    }
  }
}
</script>
